<!-- 模型详情页面 -->
<template>
  <div class="model-detail-container">
    <div class="model-detail-header">
      <div class="model-detail-title small-title">
        <div class="title-line"></div>
        {{ $t("tool.modelManage.modelBasicInfo") }}
      </div>
      <div class="model-info">
        <div class="model-3d-show-box">
          <div class="model-3d-show">
            <el-tabs type="card" v-model="activeTab">
              <el-tab-pane :label="$t('tool.modelManage.redRole')" name="0">
                <div class="model-3d-show-content" @click="handleOpenModelBase">
                  <div class="model-3d-img-show">
                    <img v-if="currentModelFiles.red.fileImageUrl" class="model-img-icon"
                      :src="getImgUrl(currentModelFiles.red.fileImageUrl)" style="object-fit: contain" />
                    <div
                      :class="[currentModelFiles.red.fileImageUrl ? 'model-img-option' : 'upload-btn', 'loc-center']">
                      <el-popover placement="top" :title="$t('tool.modelManage.selectModel')" trigger="hover">
                        <span slot="reference" role="img" class="appIcon">
                          <svg-icon class="jtyj-active-color" icon-class="add" width="25" height="25" />
                        </span>
                      </el-popover>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane :label="$t('tool.modelManage.blueRole')" name="1">
                <div class="model-3d-show-content" @click="handleOpenModelBase">
                  <div class="model-3d-img-show">
                    <img v-if="currentModelFiles.blue.fileImageUrl" class="model-img-icon"
                      :src="getImgUrl(currentModelFiles.blue.fileImageUrl)" style="object-fit: contain" />
                    <div
                      :class="[currentModelFiles.blue.fileImageUrl ? 'model-img-option' : 'upload-btn', 'loc-center']">
                      <el-popover placement="top" :title="$t('tool.modelManage.selectModel')" trigger="hover">
                        <span slot="reference" role="img" class="appIcon">
                          <svg-icon class="jtyj-active-color" icon-class="add" width="25" height="25" />
                        </span>
                      </el-popover>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div style="height: 45px;padding-top: 5px;">
          <el-button class="float-right" @click="editInfo">{{
            isEdit ? $t("setup.buttonText.save") : $t("setup.buttonText.edit")
          }}</el-button>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="105px" class="jtyj-form"
          style="width: 100%; margin-right: 2%">
          <el-form-item :label="$t('tool.modelManage.chineseName')" prop="modelName">
            <!-- 模型名称 -->
            <el-input :disabled="!isEdit" v-model="form.modelName"
              :placeholder="$t('tool.others.placehoderInput')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('tool.modelManage.englishName')" prop="modelEnglishName">
            <!-- 模型英文名 -->
            <el-input :disabled="!isEdit" v-model="form.modelEnglishName"
              :placeholder="$t('tool.others.placehoderInput')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('tool.modelManage.categoryCode')" prop="categoryCode">
            <!-- 类别代号 -->
            <el-input-number :disabled="!isEdit" v-model="form.categoryCode" :precision="0" controls-position="right"
              :placeholder="$t('tool.others.placehoderInput')" style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('tool.modelManage.categoryLabel')">
            <!-- 类别标识 -->
            <el-select :disabled="!isEdit" v-model="form.categoryLabel" style="width: 100%" class="jtyj-select"
              :placeholder="$t('tool.others.placehoderSelect')">
              <el-option v-for="item in categorySignOptions" :key="item.value"
                :label="$t('tool.modelManage.' + item.i18nName)" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('tool.modelManage.modelResolution')" prop="modelResolution">
            <!-- 模型分辨率 -->
            <el-select :disabled="!isEdit" v-model="form.modelResolution"
              :placeholder="$t('tool.others.placehoderInput')" style="width: 100%" class="jtyj-select">
              <el-option v-for="item in resolutionOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('tool.modelManage.modelDescription')">
            <!-- 模型描述 -->
            <el-input :disabled="!isEdit" v-model="form.modelDescription" type="textarea"
              :placeholder="$t('tool.others.placehoderInput')"></el-input>
          </el-form-item>
          <!-- 模型类型 -->
          <el-form-item :label="$t('tool.modelManage.modelType')">
            <el-select v-model="form.modelType" disabled placeholder="">
              <el-option :label="$t('tool.modelManage.modelType1')" :value="0"></el-option>
              <el-option :label="$t('tool.modelManage.modelType2')" :value="1"></el-option>
              <el-option :label="$t('tool.modelManage.modelType3')" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="model-detail-content flex flex-col">
      <div class="model-detail-title small-title">
        <div class="title-line"></div>
        {{ $t("tool.modelManage.modelVersionControl") }}
      </div>
      <div style="flex-grow: 1; padding: 10px; overflow: hidden; overflow-y: auto">
        <div style="display: flex; justify-content: space-between">
          <el-form ref="versionForm" :model="versionForm" label-width="120px" style="width: 450px">
            <el-form-item :label="$t('tool.modelManage.mainVersionSelect')">
              <el-select v-model="versionForm.mainVersionId" @change="handleChangeMainVersion" style="width: 100%"
                :disabled="!mainVersionOptions.length > 0">
                <el-option v-for="item in mainVersionOptions" :key="item.mainVersionId"
                  :label="item.defaultVersion ? item.mainVersionName + '  ★' : item.mainVersionName"
                  :value="item.mainVersionId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="flex items-start">
            <el-select class="margin-right-10 width150" v-model="versionForm.mainVersionState"
              @change="handleChangeMainVersionState" :disabled="!mainVersionOptions.length > 0">
              <el-option :label="$t('tool.modelManage.versionStatusSelect.developing')" :key="0" :value=0></el-option>
              <el-option :label="$t('tool.modelManage.versionStatusSelect.haveReleased')" :key="1" :value=1></el-option>
            </el-select>
            <el-button v-if="versionForm.defaultVersion" style="cursor: not-allowed;"
              :disabled="!mainVersionOptions.length > 0">{{
                $t("tool.modelManage.isDefaultMainVersion")
              }}</el-button>
            <el-button v-else @click="setDefaultMainVersion" :disabled="!mainVersionOptions.length > 0">{{
              $t("tool.modelManage.setDefaultMainVersion")
            }}</el-button>
            <el-button @click="addMainVersion">{{
              $t("tool.modelManage.addMainVersion")
            }}</el-button>
            <el-button @click="showVersionStatistic" :disabled="!mainVersionOptions.length > 0">{{
              $t("tool.modelManage.versionStatistic")
            }}</el-button>
            <el-button class="jtyj-btn-cancel" @click="handleDelMainVersion"
              :disabled="!mainVersionOptions.length > 0">{{
                $t("setup.buttonText.delete")
              }}</el-button>
          </div>
        </div>
        <div class="model-detail-content-box" v-if="mainVersionOptions.length > 0">
          <el-form ref="versionForm" :model="versionForm" :inline="true" label-width="120px" style="width: 100%">
            <el-form-item :label="$t('tool.modelManage.mainVersionId')">
              <el-input style="width: 100%" disabled v-model="versionForm.mainVersionCode"></el-input>
            </el-form-item>
            <el-form-item :label="$t('tool.modelManage.mainVersionDescription')">
              <el-input type="textarea" style="width: 500px" v-model="versionForm.mainVersionDescription"
                @change="handlechange"></el-input>
            </el-form-item>
          </el-form>
          <div class="three-level-heading">
            {{ $t("tool.modelManage.modelConfiguration") }}
          </div>
          <div class="content-header">
            <div class="model-detail-middle-box" @click="dataModeling">
              <div class="img-box">
                <img src="/images/data-modeling.png" alt="" />
              </div>
              <div class="btn-text model-btn-text">
                {{ $t("tool.modelManage.dataModeling") }}
                <span class="model-btn-center">
                  {{ $t("tool.modelManage.immediateAccess") }} >>
                </span>
              </div>
            </div>
            <div class="model-detail-middle-box" @click="dataReference">
              <div class="img-box img-box-color2">
                <img src="/images/data-reference.png" alt="" />
              </div>
              <div class="btn-text model-btn-text">
                {{ $t("tool.modelManage.dataReference") }}
                <span class="model-btn-center model-btn-center-color2">
                  {{ $t("tool.modelManage.immediateAccess") }} >>
                </span>
              </div>
            </div>
          </div>
          <div class="content-table">
            <!-- 参数化建模 -->
            <div :class="['table-item', { 'fullscreen': isParametricModelingFullscreen }]">
              <div :class="[{ 'inner-border': isParametricModelingFullscreen }]">
                <div style="display: flex; position: relative;">
                  <div class="three-level-heading">
                    {{ $t("tool.modelManage.parametricModeling") }}
                  </div>
                  <button class="expand-btn" @click="toggleFullscreen('parametricModeling')">
                    <svg-icon v-if="!isParametricModelingFullscreen" class="w-5 h-5" icon-class="fullscreen" />
                    <svg-icon v-else icon-class="exit-fullscreen" class="w-5 h-5" />
                  </button>
                </div>
                <div class="header-select loc-end">
                  <el-form :inline="true" :model="search" class="demo-form-inline">
                    <el-form-item :label="$t('tool.modelManage.chineseName')">
                      <el-input v-model="search.chineseName"
                        :placeholder="$t('tool.others.placehoderInput')"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button @click="getParametricModelingList()">{{
                        $t("setup.buttonText.query") }}</el-button>
                    </el-form-item>
                    <el-form-item>
                      <el-button @click="openParametricModeling()">{{
                        $t("setup.buttonText.new")
                      }}</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="table-item-table">
                  <el-table :data="parametricModelingList"
                    :height="isParametricModelingFullscreen ? 'calc(100vh - 166px)' : '190px'">
                    <el-table-column align="center" type="index" :label="$t('tool.modelManage.indexNumber')"
                      width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="modelingCode" :label="$t('tool.modelManage.modelingCode')">
                    </el-table-column>
                    <el-table-column align="center" prop="chineseName" :label="$t('tool.modelManage.chineseName')">
                    </el-table-column>
                    <el-table-column align="center" prop="englishName" :label="$t('tool.modelManage.englishName')">
                    </el-table-column>
                    <el-table-column align="center" :label="$t('tool.others.controls')" width="250px">
                      <template slot-scope="scope">
                        <el-button :class="['margin-right-10', 'jtyj-button-text']" type="text"
                          @click="openParametricModeling(scope.row)">
                          {{ $t("setup.buttonText.edit") }}
                        </el-button>
                        <el-button :class="['margin-right-10', 'jtyj-button-text']" type="text"
                          @click="deleteParametricModeling(scope.row)">
                          {{ $t("setup.buttonText.delete") }}
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
            <!-- 模型动态链接库 -->
            <div :class="['table-item', { 'fullscreen': isDllFullscreen }]">
              <div :class="[{ 'inner-border': isDllFullscreen }]">
                <div style="display: flex; position: relative;">
                  <div class="three-level-heading">
                    {{ $t("tool.modelManage.minorVersionList") }}
                  </div>
                  <button class="expand-btn" @click="toggleFullscreen('dll')">
                    <svg-icon v-if="!isDllFullscreen" class="w-5 h-5" icon-class="fullscreen" />
                    <svg-icon v-else icon-class="exit-fullscreen" class="w-5 h-5" />
                  </button>
                </div>
                <div class="header-select flex flex-row justify-end padding-right-10">
                  <div class="flex items-end">
                    <el-button @click="downloadTemplate">{{
                      $t("setup.buttonText.downloadTemplate")
                    }}</el-button>
                    <el-button @click="addDll">{{
                      $t("tool.modelManage.addDll")
                    }}</el-button>
                  </div>
                </div>
                <div class="table-item-table">
                  <el-table :data="dllOptions" :height="isDllFullscreen ? 'calc(100vh - 166px)' : '190px'">
                    <el-table-column align="center" type="index" :label="$t('tool.modelManage.indexNumber')"
                      width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="dllNumber" :label="$t('tool.modelManage.dllNumber')">
                    </el-table-column>
                    <el-table-column align="center" prop="dllDescription" :label="$t('tool.modelManage.dllDescription')"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="dllFilePath" :label="$t('tool.modelManage.dllFilePath')"
                      :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <span class="file-path-btn" :title="$t('tool.others.placehoderUpload')"
                          @click="handleUpload($event, 'dll', scope.row)">{{ getFileName(scope.row.dllFilePath)
                          }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="codeFilePath" :label="$t('tool.modelManage.codeFilePath')"
                      :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <span class="file-path-btn" :title="$t('tool.others.placehoderUpload')"
                          @click="handleUpload($event, 'code', scope.row)">{{ getFileName(scope.row.codeFilePath)
                          }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" :label="$t('tool.others.controls')" width="250px">
                      <template slot-scope="scope">
                        <el-button v-if="scope.row.defaultVersion" class="jtyj-button-text" type="text"
                          style="margin-right: 10px;cursor: not-allowed;">{{ $t("tool.modelManage.isDefaultDll") }}
                        </el-button>
                        <el-button v-else class="jtyj-button-text" type="text" style="margin-right: 10px"
                          @click="setDefaultDll(scope.row)">{{ $t("tool.modelManage.setDefaultDll") }}
                        </el-button>
                        <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
                          <div class="dropdown-menu">
                            <div class="menu-item mx-1" v-for="menu in getMenuList(scope.row)" :key="menu.id"
                              @click="handleMenuClick(menu)">
                              {{ menu.name }}
                            </div>
                          </div>
                          <el-button slot="reference" class="jtyj-button-text" type="text">{{
                            $t("setup.buttonText.download") }}</el-button>
                        </el-popover>
                        <el-button class="jtyj-button-text" type="text" style="margin-left: 10px"
                          @click="addDll(scope.row)">{{ $t("setup.buttonText.edit") }}</el-button>
                        <el-button class="jtyj-button-text" type="text" @click="delDll(scope.row)">{{
                          $t("setup.buttonText.delete") }}</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="model-detail-content-box" v-else>
          <el-empty :description="$t('tool.others.noData')"></el-empty>
        </div>
      </div>
    </div>
    <ModelLibraryUpload v-if="isUploadModelLibrary" ref="modelLibraryUploadRef"></ModelLibraryUpload>
    <SharingSetting v-if="isSharingSetting" :info="nodeInfo.data" ref="sharingSettingRef" @refresh="refresh">
    </SharingSetting>
    <ModelBase v-if="isModelBase" ref="modelBaseRef" @updateModelFile="updateModelFile"></ModelBase>
    <DataModeling v-if="isDataModeling" ref="dataModelingRef" :modelId="modelId" :modelName="modelName" :mainVersionId="versionForm.mainVersionId"></DataModeling>
    <DataReference v-if="isDataReference" ref="dataReferenceRef" :modelId="modelId" :modelName="modelName" :mainVersionId="versionForm.mainVersionId"></DataReference>
    <AddMainVersion v-if="isAddMainVersion" ref="addMainVersionRef" :modelId="modelId" @refresh="getMainVersionList">
    </AddMainVersion>
    <VersionStatistic v-if="isShowVersionStatistic" ref="showVersionStatisticRef"
      @changeMainVersion="changeMainVersion">
    </VersionStatistic>
    <AddDll v-if="isAddDll" ref="addDllRef" @refresh="getDllList"></AddDll>
    <ParametricModeling v-if="isParametricModeling" ref="parametricModelingRef" :modelId="modelId" :mainVersionId="versionForm.mainVersionId" @refresh="getParametricModelingList">
    </ParametricModeling>
  </div>
</template>

<script>
import {
  getModelDataTree,
  getSelfGlobalDataTree,
  updateModel,
  updateModelFile,
  getThreeDimensionFile,
  checkCodeUnique,
  getModelInfo,
  getMainVersionList,
  setDefaultMainVersion,
  updateMainVersion,
  delMainVersion,
  getDllList,
  setDefaultDll,
  updateDll,
  delDll,
  getModelingList,
  getModeling,
  delModeling,
} from "@/api/myspace/model-manage-tool/model-manage";
import { getToken } from "@/utils/auth";
import ModelLibraryUpload from "./model-liarary-upload.vue";
import SharingSetting from "./sharing-settings.vue";
import ModelBase from "./model-base-dialog.vue";
import DataModeling from "./data-modeling.vue";
import DataReference from "./data-reference.vue";
import AddMainVersion from "./add-main-version.vue";
import VersionStatistic from "./version-statistics.vue";
import AddDll from "./add-dll.vue";
import ParametricModeling from "./parametric-modeling.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      isEdit: false,
      categorySignOptions: [
        {
          label: "其他",
          value: "1",
          i18nName: "other",
        },
        {
          label: "卫星",
          value: "2",
          i18nName: "satellite",
        },
      ],
      search: {
        chineseName: "",
      },
      activeTab: "0", // 默认展示红方模型
      flag: "", // 标志点击的是源码还是代理文件
      modelId: null, // 当前选择的模型ID
      currentDll: null, // 当前点击的模型动态链接库版本
      version: null,
      dllId: null, // 模型动态链接库版本
      isUploadModelLibrary: false,
      isSharingSetting: false, // 是否展示共享设置
      isModelBase: false, // 是否打开模型库
      isCategoryValid: false, // 校验类别代号是否重复，默认重复
      isAddMainVersion: false, // 控制新增版本弹框是否打开
      isShowVersionStatistic: false, // 控制版本统计是否展示
      isAddDll: false, // 新增模型动态链接库版本
      isParametricModeling: false, //新增参数化建模
      isDataModeling: false,// 控制数据建模弹框是否打开
      isDataReference: false,// 控制数据引用弹框是否打开
      isParametricModelingFullscreen: false,// 控制参数化建模是否全屏 
      isDllFullscreen: false,// 控制次版本列表是否全屏 
      modelId: null, // 当前选中的模型的ID
      form: {},
      versionForm: {
        mainVersionId: null,
        mainVersionCode: null,
        mainVersionDescription: null,
        mainVersionState: 0,
      },
      fileList: [], // 上传代理依赖的文件列表
      mainVersionOptions: [], // 版本列表
      dllOptions: [], // 模型动态链接库
      upForm: {
        code_zip: null, //代理依赖
      },
      currentModelFiles: {
        red: { fileImageUrl: null, fileUrl: null },
        blue: { fileImageUrl: null, fileUrl: null },
      }, // 当前模型的红蓝方模型文件数据
      rules: {
        modelName: [
          { required: true, message: "模型名称不可为空", trigger: "blur" },
        ],
        modelEnglishName: [
          { required: true, message: "模型英文名不可为空", trigger: "blur" },
        ],
        categoryCode: [
          { required: true, message: "类别代号不得为空", trigger: "blur" },
        ],
        modelResolution: [
          { required: true, message: "模型分辨率不得为空", trigger: "blur" },
        ],
      },
      versionOptions: [
        {
          label: "v1.0.0",
          value: "v1.0.0",
        },
        {
          label: "v2.0.0",
          value: "v2.0.0",
        },
        {
          label: "v3.0.0",
          value: "v3.0.0",
        },
      ],
      parametricModelingList: [],
      resolutionOptions: [
        {
          label: "无",
          value: "无",
        },
        {
          label: "战术/战役级",
          value: "战术/战役级",
        },
        {
          label: "任务级",
          value: "任务级",
        },
        {
          label: "交战级",
          value: "交战级",
        },
        {
          label: "工程级",
          value: "工程级",
        },
      ],
    };
  },
  props: {
    nodeInfo: {
      type: Object,
    },
  },
  components: {
    ModelLibraryUpload,
    SharingSetting,
    ModelBase,
    AddMainVersion,
    VersionStatistic,
    AddDll,
    ParametricModeling,
    DataModeling,
    DataReference
  },
  watch: {
    nodeInfo: {
      async handler(newVal, oldVal) {
        this.modelId = newVal.data.modelId
        this.modelName = newVal.data.modelName
        // 请求获取模型基本信息
        await getModelInfo(this.modelId).then((response) => {
          if (response.code == 200) {
            this.form = response.data;
          }
        })
        this.currentModelFiles = { red: {}, blue: {} };
        if (this.form.redModelFileId) {
          this.getModelFileDetail(this.form.redModelFileId).then((res) => {
            this.currentModelFiles.red = res;
          });
        }
        if (this.form.blueModelFileId) {
          this.getModelFileDetail(this.form.blueModelFileId).then((res) => {
            this.currentModelFiles.blue = res;
          });
        }
        this.getMainVersionList(true);
        this.isEdit = false;
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    ...mapState({
      i18nData: (state) => state.systemStyle.i18nData,
      userId: (state) => state.user.id,
    }),
  },
  mounted() {
    // 文件上传成功的回调
    this.$EventBus.$on("fileSuccess", (response) => {
      if (response.code == 200) {
        if (this.flag == "code") {
          this.updateDll({
            ...this.currentDll,
            codeFilePath: response.data.filePath,
          });
          this.flag = "";
        } else if (this.flag == "dll") {
          this.updateDll({
            ...this.currentDll,
            dllFilePath: response.data.filePath,
          });
          this.flag = "";
        }
      } else {
        this.flag = "";
        this.$message.error(
          this.$toolHandle.getI18nName(
            this.$zh.setup.responseText,
            this.$en.setup.responseText,
            this.$i18n.locale,
            "error"
          )
        );
      }
      this.$EventBus.$emit("close");
    });
  },
  methods: {
    // 切换全屏
    toggleFullscreen(moduleName) {
      if (moduleName === "parametricModeling") {
        this.isParametricModelingFullscreen = !this.isParametricModelingFullscreen;
      } else if (moduleName === "dll") {
        this.isDllFullscreen = !this.isDllFullscreen;
      }
    },
    //获取参数化建模列表
    getParametricModelingList() {
      getModelingList({
        modelId: this.modelId,
        mainVersionId: this.versionForm.mainVersionId,
        chineseName: this.search.chineseName
      }).then((response) => {
        if (response.code == 200) {
          this.parametricModelingList = response.rows;

        }
      });
    },
    // 打开参数化建模
    openParametricModeling(row) {
      this.getParametricModelingList();
      // if (row) {
      // }
      this.isParametricModeling = true;
      this.$nextTick(() => {
        this.$refs.parametricModelingRef.init(row, this.versionForm.mainVersionId);
      });
    },
    // 删除参数化建模
    deleteParametricModeling(row) {
      this.$confirm(
        `确定删除参数化建模  ${row.chineseName} ?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "message-box-style",
          type: "warning",
        }
      )
        .then(() => {
          delModeling(row.modelingId).then((response) => {
            if (response.code == 200) {
              this.$message.success(
                this.$toolHandle.getI18nName(
                  this.$zh.setup.responseText,
                  this.$en.setup.responseText,
                  this.$i18n.locale,
                  "success"
                )
              );
              this.getParametricModelingList();
            }
          });
        })
        .catch(() => { });
    },
    //切换编辑状态 或保存信息
    async editInfo() {
      if (this.isEdit) {
        const success = await this.saveInfo();
        console.log("success", success);
        if (!success) return;
      }
      this.isEdit = !this.isEdit;
    },
    // 保存当前对模型信息的编辑
    saveInfo() {
      return new Promise((resolve, reject) => {
        this.$refs["form"].validate((valid) => {
          if (!valid) return resolve(false);
          updateModel({ ...this.form }).then((response) => {
            if (response.code == 200) {
              this.$message.success(
                this.$toolHandle.getI18nName(
                  this.$zh.setup.responseText,
                  this.$en.setup.responseText,
                  this.$i18n.locale,
                  "success"
                )
              );
              this.$emit("refresh")
              return resolve(true);
            }
          }).catch(() => {
            return resolve(false);
          })
        });
      });
    },

    // 校验类别代号是否符合规则
    validateCategoryCode(val) {
      //2025 04 08 应亚帅要求去掉前端校验，采用后端校验
      return new Promise((resolve, reject) => {
        //   if (val.toString().length != 6) {
        //     resolve(false);
        //   } else {
        //     checkCodeUnique({ code: val, modelId: this.form.modelId }).then(
        //       (response) => {
        //         if (response.code == 200) {
        //           resolve(true);
        //         } else {
        //           resolve(false);
        //         }
        //       }
        //     );
        //   }
        resolve(true);
      });
    },
    // 更新当前模型的模型文件
    updateModelFile(model) {
      if (this.activeTab == 0) {
        this.form.redModelFileId = model.fileId;
        this.getModelFileDetail(model.fileId).then((res) => {
          this.currentModelFiles.red = res;
        });
      } else {
        this.form.blueModelFileId = model.fileId;
        this.getModelFileDetail(model.fileId).then((res) => {
          this.currentModelFiles.blue = res;
        });
      }

      updateModelFile({
        ...this.form,
      }).then((response) => {
        if (response.code == 200) {
          this.$message.success(
            this.$toolHandle.getI18nName(
              this.$zh.setup.responseText,
              this.$en.setup.responseText,
              this.$i18n.locale,
              "success"
            )
          );
        }
      });

    },
    // 获取模型的图片
    getImgUrl(url) {
      return url == null ? "" : process.env.VUE_APP_BASE_API + url;
    },
    refresh() {
      this.$emit("refresh");
    },
    // 获取三维模型详细信息
    getModelFileDetail(fileId) {
      return new Promise((resolve, reject) => {
        getThreeDimensionFile(fileId).then((response) => {
          if (response.code == 200 && response.data) {
            resolve({
              fileUrl: response.data.fileUrl,
              fileImageUrl: response.data.fileImageUrl,
            });
          }
        });
      });
    },
    // 当上传的源码文件发生变化时
    handleChangeCodeZip(file, fileList) { },
    // 点击数据建模按钮，跳转页面
    dataModeling() {
      this.isDataModeling = true;
      this.$nextTick(() => {
        this.$refs.dataModelingRef.init();
      });
    },
    // 点击数据引用按钮，打开弹框
    dataReference() {
      this.isDataReference = true;
      this.$nextTick(() => {
        this.$refs.dataReferenceRef.init();
      });
    },
    // 点击共享设置
    handleManage() {
      this.isSharingSetting = true;
      this.$nextTick(() => {
        this.$refs["sharingSettingRef"].init();
      });
    },
    // 点击选择三维模型按钮，打开模型库弹窗
    handleOpenModelBase() {
      this.isModelBase = true;
      this.$nextTick(() => {
        this.$refs.modelBaseRef.init();
      });
    },
    // 获取主版本列表
    getMainVersionList(flag = false) {
      this.mainVersionOptions = [];
      this.dllOptions = [];
      this.dllId = null;
      getMainVersionList({
        modelId: this.modelId,
      }).then((response) => {
        if (response.code == 200) {
          if (Array.isArray(response.rows)) {
            this.mainVersionOptions = response.rows;
            if (this.mainVersionOptions.length > 0) {
              if (flag) {
                this.versionForm = {
                  mainVersionId: null,
                  mainVersionCode: null,
                  mainVersionState: null,
                  defaultVersion: null,
                  mainVersionDescription: null,
                };
                const target = this.mainVersionOptions.filter(
                  (item) => item.defaultVersion == true
                );

                if (target[0]) {
                  this.versionForm.mainVersionId = target[0].mainVersionId;
                  this.versionForm.mainVersionCode = target[0].mainVersionCode;
                  this.versionForm.mainVersionState = target[0].mainVersionState;
                  this.versionForm.defaultVersion = target[0].defaultVersion;
                  this.versionForm.mainVersionDescription = target[0].mainVersionDescription;
                } else {
                  this.versionForm.mainVersionId = this.mainVersionOptions[0].mainVersionId;
                  this.versionForm.mainVersionCode = this.mainVersionOptions[0].mainVersionCode;
                  this.versionForm.mainVersionState = this.mainVersionOptions[0].mainVersionState;
                  this.versionForm.defaultVersion = this.mainVersionOptions[0].defaultVersion;
                  this.versionForm.mainVersionDescription = this.mainVersionOptions[0].mainVersionDescription;
                }
                this.getCurrentMainVersionAndGlobalJsonSchema();
                this.getParametricModelingList()
                this.getDllList();
              } else {
                let target = null;

                // 应新增版本后跳转到该版本要求，注释
                // if (this.versionForm.mainVersionId) {
                //   target = this.mainVersionOptions.filter(
                //     (item) =>
                //       item.mainVersionId == this.versionForm.mainVersionId
                //   );
                // } else {
                target = this.mainVersionOptions;
                this.versionForm.mainVersionId = target[0].mainVersionId;
                // }
                if (target[0]) {
                  this.versionForm.mainVersionCode = target[0].mainVersionCode;
                  this.versionForm.mainVersionDescription =
                    target[0].mainVersionDescription;
                }
                this.getDllList();
                this.getCurrentMainVersionAndGlobalJsonSchema();
              }
            } else {
              this.versionForm = {
                mainVersionId: null,
                mainVersionDescription: null,
              };
            }
          }
        }
      });
    },
    changeMainVersion(item) {
      this.handleChangeMainVersion(item.mainVersionId)
      this.isShowVersionStatistic = false
    },
    // 切换主版本
    handleChangeMainVersion(mainVersionId) {
      const target = this.mainVersionOptions.filter(
        (item) => item.mainVersionId == mainVersionId
      );
      if (target[0]) {
        this.versionForm.mainVersionId = target[0].mainVersionId;
        this.versionForm.mainVersionCode = target[0].mainVersionCode;
        this.versionForm.mainVersionState = target[0].mainVersionState;
        this.versionForm.defaultVersion = target[0].defaultVersion;
        this.versionForm.mainVersionDescription = target[0].mainVersionDescription;
        this.dllId = null;
        this.getParametricModelingList();
        this.getDllList();
      }
    },
    handleChangeMainVersionState(mainVersionState) {
      this.$nextTick(() => {
        this.$forceUpdate();
      })
      const target = this.mainVersionOptions.filter(
        (item) => item.mainVersionId == this.versionForm.mainVersionId
      );
      if (!target[0]) return;
      updateMainVersion({
        ...target[0],
        mainVersionState: mainVersionState
      }).then((response) => {
        if (response.code == 200) {
          this.$message.success(
            this.$toolHandle.getI18nName(
              this.$zh.setup.responseText,
              this.$en.setup.responseText,
              this.$i18n.locale,
              "success"
            )
          );
        }
      });
    },
    // 设置默认主版本
    setDefaultMainVersion() {
      setDefaultMainVersion({
        mainVersionId: this.versionForm.mainVersionId,
      }).then((response) => {
        if (response.code == 200) {
          this.$message.success(
            this.$toolHandle.getI18nName(
              this.$zh.setup.responseText,
              this.$en.setup.responseText,
              this.$i18n.locale,
              "success"
            )
          );
          this.getMainVersionList(true);
        }
      });
    },
    // 新增版本
    addMainVersion() {
      this.isAddMainVersion = true;
      this.$nextTick(() => {
        this.$refs.addMainVersionRef.init();
      });
    },
    // 修改版本信息
    handlechange(val) {
      const target = this.mainVersionOptions.filter(
        (item) => item.mainVersionId == this.versionForm.mainVersionId
      );
      if (target[0]) {
        updateMainVersion({
          ...target[0],
          mainVersionDescription: val,
        }).then((response) => {
          if (response.code == 200) {
            this.$message.success(
              this.$toolHandle.getI18nName(
                this.$zh.setup.responseText,
                this.$en.setup.responseText,
                this.$i18n.locale,
                "success"
              )
            );
          }
        });
      }
    },
    // 删除版本
    handleDelMainVersion() {
      const target = this.mainVersionOptions.filter(
        (item) => item.mainVersionId == this.versionForm.mainVersionId
      );
      this.$confirm(`确定删除版本  ${target[0].mainVersionName} ?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "message-box-style",
        type: "warning",
      })
        .then(() => {
          delMainVersion(target[0].mainVersionId).then((response) => {
            if (response.code == 200) {
              this.$message.success(
                this.$toolHandle.getI18nName(
                  this.$zh.setup.responseText,
                  this.$en.setup.responseText,
                  this.$i18n.locale,
                  "success"
                )
              );
              this.getMainVersionList(true);
            }
          });
        })
        .catch(() => { });
    },
    // 版本统计
    showVersionStatistic() {
      this.isShowVersionStatistic = true;
      this.$nextTick(() => {
        this.$refs.showVersionStatisticRef.init(this.mainVersionOptions);
      });
    },
    // 请求当前模型主版本对应的jsonSchema数据以及全局的jsonSchema数据，存储到localStorage中
    getCurrentMainVersionAndGlobalJsonSchema() {
      getModelDataTree({
        modelId: this.modelId,
        mainVersion: this.versionForm.mainVersionId,
      }).then((response) => {
        if (response.code == 200) {
          if (Array.isArray(response.data)) {
            this.modelDataList = response.data[0].commonTreeList;
            localStorage.setItem(
              "modelDataList",
              JSON.stringify(this.modelDataList)
            );
          }
        }
      });
      getSelfGlobalDataTree().then((response) => {
        if (response.code == 200) {
          if (Array.isArray(response.data)) {
            this.globalTreeData = response.data[0].commonTreeList;
            localStorage.setItem(
              "globalTreeData",
              JSON.stringify(this.globalTreeData)
            );
          }
        }
      });
    },
    // 获取模型动态链接库
    getDllList() {
      getDllList({
        mainVersionId: this.versionForm.mainVersionId,
        modelId: this.modelId,
      }).then((response) => {
        if (response.code == 200) {
          if (Array.isArray(response.rows)) {
            this.dllOptions = response.rows;
            if (this.dllOptions.length > 0) {
              const target = this.dllOptions.filter(
                (item) => item.defaultVersion == true
              );
              if (target[0]) {
                this.dllId = target[0].dllId;
              } else {
                this.dllId = this.dllOptions[0].dllId;
              }
            }
          }
        }
      });
    },
    // 获取模型动态链接库版本的文件名
    getFileName(filePath) {
      return !filePath ? "" : filePath.split("/").pop();
    },
    // 设置默认模型动态链接库版本
    setDefaultDll(row) {
      setDefaultDll({
        dllId: row.dllId,
      }).then((response) => {
        if (response.code == 200) {
          this.$message.success(
            this.$toolHandle.getI18nName(
              this.$zh.setup.responseText,
              this.$en.setup.responseText,
              this.$i18n.locale,
              "success"
            )
          );
          this.getDllList();
        }
      });
    },
    // 下载模板
    downloadTemplate() {
      const mainVersionId = this.versionForm.mainVersionId;
      const modelId = this.form.modelId;
      this.$download.zip(
        `/model/model/modelDevelopmentDownload?modelId=${modelId}&mainVersionId=${mainVersionId}`,
        `user_template_${new Date().getTime()}.zip`
      )
    },
    // 新增模型动态链接库版本
    addDll(row) {
      this.isAddDll = true;
      this.$nextTick(() => {
        this.$refs.addDllRef.init(row, this.versionForm.mainVersionId);
      });
    },
    // 删除模型动态链接库版本
    delDll(row) {
      this.$confirm(
        `确定删除模型动态链接库版本  ${row.DllNumber} ?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "message-box-style",
          type: "warning",
        }
      )
        .then(() => {
          delDll(row.dllId).then((response) => {
            if (response.code == 200) {
              this.$message.success(
                this.$toolHandle.getI18nName(
                  this.$zh.setup.responseText,
                  this.$en.setup.responseText,
                  this.$i18n.locale,
                  "success"
                )
              );
              this.getDllList();
            }
          });
        })
        .catch(() => { });
    },
    // 点击上传文件
    handleUpload(e, type, row) {
      this.flag = type;
      this.currentDll = row;
      this.$EventBus.$emit("openUploader", {
        token: getToken(),
        prefixFlag: 2,
        userId: this.userId,
      });
    },
    // 修改模型动态链接库版本信息
    updateDll(form) {
      updateDll({
        ...form,
      }).then((response) => {
        if (response.code == 200) {
          this.$message.success(
            this.$toolHandle.getI18nName(
              this.$zh.setup.responseText,
              this.$en.setup.responseText,
              this.$i18n.locale,
              "success"
            )
          );
          this.getDllList();
        }
      });
    },
    // 获取下拉下载的菜单
    getMenuList(row) {
      let arr = [];
      if (row.codeFilePath) {
        arr.push({
          id: "code",
          name: this.getFileName(row.codeFilePath),
          path: row.codeFilePath,
        });
      }
      if (row.dllFilePath) {
        arr.push({
          id: "dll",
          name: this.getFileName(row.dllFilePath),
          path: row.dllFilePath,
        });
      }
      return arr;
    },
    // 点击下载文件
    handleMenuClick(menu) {
      this.download(
        "/model/dll/download",
        { filePath: menu.path },
        `${menu.name}`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.model-detail-title {
  padding: 10px;
  color: var(--ui-text-color);
  border-bottom: 1px solid var(--ui-border-color-base);
  margin-bottom: 10px;
}

.model-3d-show-box {
  width: 100%;
}

.model-3d-show {
  border: 1px solid var(--ui-border-color-base);
  height: 270px;
  width: 100%;
  margin-top: 5px;
  border-radius: 8px;

  .model-3d-show-content {
    width: 100%;
    height: 100%;

    .model-3d-img-show {
      position: relative;
      width: 100%;
      height: 100%;

      .model-img-icon {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .model-img-option {
        position: absolute;
        z-index: 10;
        opacity: 0;
        top: 1px;
        bottom: 1px;
        left: 1px;
        right: 1px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.1);
        pointer-events: auto;
      }

      &:hover {
        .model-img-option {
          opacity: 1;
        }
      }
    }

    .upload-btn {
      width: 100%;
      height: 100%;
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
      cursor: pointer;
    }
  }
}

.model-detail-container {
  width: 100%;
  height: 100%;
  background-color: var(--ui-menu-item-active-bg);
  box-sizing: border-box;
  overflow: auto;
  display: flex;

  .model-detail-content-box {
    width: 100%;
    background-color: var(--ui-item-hover-bg);
    border-radius: 10px;
    padding-top: 15px;
    min-height: calc(100vh - 200px);
  }

  .three-level-heading {
    font-weight: bold;
    border-top: 1px solid var(--ui-border-color-base);
    border-bottom: 1px solid var(--ui-border-color-base);
    font-size: var(--ui-font-size-semi-lg);
    padding: 10px;
    margin-bottom: 10px;
  }

  .img-box {
    padding: 8px;
    border-radius: 15px;
    height: 46px;
    width: 46px;
    text-align: center;
    margin-right: -10px;
    z-index: 9;
    background: linear-gradient(to bottom right, var(--app-primary-base), var(--app-primary-base));
  }

  .img-box-color2 {
    background: linear-gradient(to bottom right, var(--app-primary-base), var(--app-primary-base));
  }

  .model-detail-middle-box {
    cursor: pointer;
    width: 45%;
    font-size: var(--ui-font-size-lg);
    margin-bottom: 10px;
    border-radius: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;

    img {
      height: 30px;
      width: 30px;
    }
  }

  .model-btn-center {
    margin-left: 20px;
    font-weight: 400;
    color: var(--app-primary-base);
  }

  .model-btn-center-color2 {
    color: var(--app-primary-base);
  }

  .model-detail-header {
    width: 23%;
    height: 100%;
    min-width: 205px;
    border-right: 1px solid var(--ui-border-color-base);
    background-color: var(--ui-component-background);
    overflow: hidden;
    box-sizing: border-box;

    .model-info {
      width: 100%;
      height: calc(100% - 40px);
      padding: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      box-sizing: border-box;

      .left-info {
        width: 70%;
        height: 100%;
      }

      .right-btns {
        width: 30%;
        height: 100%;
      }

      .model-detail-thumbnailClickUpload-tips {
        text-align: center;
        padding: 10px 0;
        font-size: var(--ui-font-size-sm);
      }
    }

    .model-btn {
      width: 100%;
      height: 40%;
      display: flex;
      justify-content: space-between;

      .left-btns {
        width: 80%;
        height: 100%;
      }

      .right-btns {
        width: 20%;
        height: 100%;
        padding-right: 0.5%;
        box-sizing: border-box;

        .icon-btn {
          width: 30px;
          height: 30px;
          cursor: pointer;
        }

        .icon-btn-first {
          background: url("/images/png/statistic.png") center no-repeat;
          background-size: 100% 100%;
        }

        .icon-btn-last {
          margin-left: 10px;
          background: url("/images/png/logs.png") center no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .model-detail-content {
    width: 77%;
    min-width: 587px;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--ui-component-background);
    overflow: hidden;

    .content-header {
      width: 100%;
      height: 92px;
      display: flex;
      align-items: center;
      padding: 0 100px 0 50px;
      justify-content: space-between;

      .header-btn {
        width: 15%;
        height: 80%;
        border-radius: 8px;
        border: 1px solid var(--ui-border-color-base);
        cursor: pointer;

        img {
          width: 32px;
          height: 32px;
        }

        .btn-text {
          width: calc(80% - 30px);
          height: 100%;
          color: #667085;
        }
      }

      .header-btn:hover {
        border-color: #c0c4cc;

        .btn-text {
          color: #344054;
        }
      }
    }

    .content-table {
      width: 100%;
      // height: calc(100% - 55px);

      .table-item {
        width: 100%;

        .table-item-header {
          width: 100%;
          height: 50px;
          padding: 0 0.5%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;

          .header-title,
          .first-title,
          .second-title {
            width: 25%;
            height: 100%;
            color: #344054;
            font-size: 20px;
            display: flex;
            align-items: center;
          }

          .first-title::before {
            content: "";
            background: url("/images/model-version.svg") center no-repeat;
            background-size: contain;
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-right: 10px;
            vertical-align: middle;
          }

          .second-title::before {
            content: "";
            background: url("/images/associate-model.svg") center no-repeat;
            background-size: contain;
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-right: 10px;
            vertical-align: middle;
          }

          .header-select {
            width: 20%;
            height: 100%;
          }
        }

        .table-item-table {
          width: 100%;
          padding: 0.5%;
          box-sizing: border-box;

          .file-path-btn {
            border-bottom: 1px solid var(--ui-text-color);
            cursor: pointer;
          }
        }
      }
    }
  }
}

.model-btn-text {
  background-color: var(--ui-component-background);
  padding: 11px 20px 11px 20px;
  border-radius: 0 10px 10px 0;
  width: 100%;
  height: 46px;
  display: flex;
  justify-content: space-between;
}

.padding-left-10 {
  padding-left: 10px;
}

.padding-right-10 {
  padding-right: 10px;
}

.expand-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 10;
  padding: 4px;
  background-color: var(--ui-component-background);
  color: var(--ui-text-color);
  border: 0px solid #ddd;
  cursor: pointer;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background: var(--ui-component-background);
  // border: 1px solid var(--ui-border-color-base);
  // border-radius: 10px;
  overflow: hidden;
}

.inner-border {
  margin: 15px;
  border: 1px solid var(--ui-border-color-base);
  border-radius: 10px;
  overflow: auto;
}

.w-5 {
  width: 5px;
}

.h-5 {
  height: 5px;
}
</style>
<style scoped>
/* 新增样式：使 el-tab-pane 按钮各占 50% */
.model-detail-container>>>.el-tabs--card .el-tabs__nav {
  width: 100%;
  border-left: none;
}

/* 设置每个tab平分宽度 */
.model-detail-container>>>.el-tabs--card>.el-tabs__header .el-tabs__item {
  width: 50%;
  display: flex !important;
  /* 覆盖默认inline-block */
  justify-content: center;
  padding: 0 10px;
  /* 清除默认边距影响 */
}
</style>